<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Lightly-HTML-Project</title>
    <style>
      *{
        font-style: normal;
        padding: 0;
        margin: 0;
          font-weight: 400;
      }
      .right_top_detail_important{
        font-family: 'Overpass Black';
        font-weight: 800;
        font-size: 7pt;
          line-height: 10pt;
      }
      .right_top_detail{
        font-family: 'Overpass';
        font-size: 7pt;
          line-height: 10pt;
      }
      .invoice_title{
          display: block;
        margin-top: 30px;
        font-family: 'Overpass Black';
        font-size: 16pt;
        width: 100%;
        font-weight:800;
        text-align: left;
        height: 24px;
        line-height: 15px;
      }
      .invoice_list{
        line-height: 7pt;
        font-family: 'Overpass';
        font-weight: 500;
        font-size: 7pt;
      }
      .invoice_list_col{
           display: inline-block;
           width: 48%;
           box-sizing: border-box;
           vertical-align: text-top;
        }
        .invoice_list_col_item{
          line-height: 15px;
        }
        .invoice_list_col_item > div{
          width: 48%;
          display: inline-block;
          box-sizing: border-box;
          vertical-align: text-top;
        }
        .table_title{
          font-family: 'Overpass Black';
            font-style:normal;
          height: 41px;
          background:#FFF101;
          font-weight: 900;
          text-align: left;
          font-size: 7pt;
          line-height: 15px;
        }
        .table{
          display: table;
          table-layout: fixed;
          width: auto;
          word-break: break-all;
          padding-right: 33px;
          border-collapse:collapse;
          border-bottom:0.5px solid #FFF101;
        }
        .table_title th{
          width: 13%;
          box-sizing: border-box;
          padding: 0 4px;
        }
        .table_title th:first-child{
          width: 15%;
        }
        .table_title th:nth-child(3){
          width: 18%;
        }
        .table_value td{
          width: 13%;
          box-sizing: border-box;
          padding: 0 4px;
          word-break:break-word;
        }
        .table_value td:first-child{
          width: 15%;
        }
      .table_value td:nth-child(2){
          word-wrap: break-word;
      }
        .table_value td:nth-child(3){
          width: 18%;
        }
        .table_footer{
          width: 25%;
          float: right;
            margin-right: 33px;
        }
        .table_sub_title{
          font-family: 'Overpass';
          width:46%;
          font-weight:800;
          font-size: 7pt;
          box-sizing: border-box;
          padding: 0 4px;
          /* display: inline-block; */
          float: left;
        }
        .table_sub_title>div{
            font-family: 'Overpass';
            font-weight:800;
            font-size: 7pt;
        }
        .table_sub_value{
          font-family: 'Overpass';
          width: 50%;
          display: inline-block;
          box-sizing: border-box;
          font-size: 7pt;
          padding: 0 6px;
          word-break: break-all;
          height: inherit;
          vertical-align: sub;
        }
        .table_value{
          font-family: 'Overpass';
          font-size: 7pt;
        }
        .footer_comment{
          font-family: 'Overpass';
          font-size: 7pt;
          line-height: 30px;
          margin-top: 295px;
        }
        #customerInfo{
            display: inline-block;

        }
        .bottom_text {
            width: 100%;
            position: absolute;
            bottom: 15px;
            left: 0px;
            box-sizing: border-box;
            padding: 0 0px;
            font-family: Overpass;
        }
      @page {
          size: 210mm 297mm; /*设置纸张大小:A4(210mm 297mm)、A3(297mm 420mm) 横向则反过来*/
          margin-bottom: 1.2in;
          padding-bottom: 0;
          overflow: visible;
          line-height:10px;
          /*margin-left: 0;*/
          padding-left: 0;
          margin-right: 9px;
          padding-right: 0px;
          margin-top: 316px;
          padding-top: 0;
          @bottom-left {
              width: 400px;
              white-space: normal;
              word-break: break-all;
              font-family: 'Overpass';
              font-size: 7pt;
              line-height: 10pt;
              color: #727272;
              position: absolute;
              content: "${footerFirstLang?html}\A${officeLang?html}: ${registeredOffice?html}\A${vatRegNo?html} - IBAN ${iban} - BIC ${bic}";
              white-space: pre;
              vertical-align: bottom;
              padding-bottom: 30px;
          };
          @bottom-right {
              padding-right: 20px;
              font-size: 7pt;
              font-family: 'Overpass';
              content: "P." counter(page) "/" counter(pages);
              background: transparent;
              margin-left: 20px;
              padding-bottom: 40px;
          };
          @top-right-corner {
              /*border-right: 20px solid #FFF101;*/
              width: 20px;
              background: #FFF101;

          };
          @right-top {
              /*border-right: 9px solid #FFF101;*/
              background: #FFF101;
              width: 9px;
          };
          @right-middle {
              /*border-right: 9px solid #FFF101;*/
              background: #FFF101;
              width: 9px;
          };
          @bottom-right-corner {
              /*border-right: 9px solid #FFF101;*/
              width: 9px;
              background: #FFF101;
          };
          @top-left {
              /*content: "11111";*/
              /*border: 2px solid blue;*/
              background-image: url("");
              background-repeat: no-repeat;
              background-size: 83px 83px;
              background-position: 0px 40px;
              content: element(tableTitleLeft);
              padding-top: 200px;
              width: 120mm;
          }
          @top-right {
              text-align: left;
              height: 140px;
              /*content: '${company}\A ${street}\A ${city}${province}\A ${country}\A t +${areaCode} ${telephone}\A f +${faxAreaCode} ${faxNumber}\A info@lotuscars.nl\A lotuscars.com';*/
              white-space: pre;
              content: element(customerInfo);
              /*line-height: 20px;*/
              /*border: 1px solid green;*/
              /*width: 25%;*/
              font-family: 'Overpass';
              font-size: 7pt;
              position: relative;
              vertical-align: top;
          }
      }
      #customerInfo{
          position:running(customerInfo);
          height: 100%;
          margin-top: 40px;
          /*border: 2px solid red;*/

      }
      #customerInfoFirst{
          position: running(customerInfoFirst);
          margin-left: 80px;
      }
      #tableTitleLeft{
          position: running(tableTitleLeft);
          width: 137mm;

      }
      #tableTitleLeft .tableTitleLeft_div{
          background: #FFF101;
          width: 100%;
          border: 1px solid #FFF101;
      }
      #tableTitleLeft .tableTitleLeft_div>div{
          font-family: 'Overpass Black';
          height: 40px;
          font-size: 7pt;
          background:#FFF101;
          font-weight: 900;
          box-sizing: border-box;
          float: left;
          padding: 0 4px;
          text-align: left;
          line-height: 40px;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(1){
          width: 18%;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(2){
          width: 18%;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(3){
          width: 23%;
          line-height: 15px;
          vertical-align: bottom;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(3)>div{
          margin-top: 4pt;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(4){
          width: 16%;
      }
      #tableTitleLeft .tableTitleLeft_div>div:nth-child(5){
         width: 17%;
          padding-left: 4px;
          border-right: 1px solid #FFF101;
      }
      #tableTitleRight{
          position: absolute;
          width: 75mm;
          left: 0;
          /*border: 2px solid red;*/
      }
      #tableTitleRight>div{
          display: inline-block;
          font-family: 'Overpass Black';
          height: 41px;
          background:#FFF101;
          font-weight: 900;
          padding:0 4px;
          margin-top: 128px;
          box-sizing: border-box;
          width: 30%;
          /*margin: 0;*/
          float: left;
          text-align: left;
          line-height: 40px;
          font-size: 7pt;
      }

      @page:first {
          margin-top: 200px;
          @top-right {
              content: element(customerInfoFirst);
          }
          @top-left {
              /*content: "11111";*/
              /*border: 2px solid blue;*/
              background-image: url("");
              background-repeat: no-repeat;
              background-size: 83px 83px;
              background-position: 0px 40px;
              width: 135mm;
          }
      }
    </style>
</head>

<body>
<div style="height:100%;padding-right: 0px; font-size: 7pt; font-weight: 400;">
    <!--        <div style="margin-top:50px;height: 160px;">-->
    <!--            <div style="width: 80%;height: 160px;float: left;">-->
    <!--               <img style="width:63px;height:63px" src=""></img>-->
    <!--            </div>-->
    <div id="customerInfoFirst">
        <div class="right_top_detail_important">${company}</div>
        <div class="right_top_detail"><div>${street}</div><div>${postalCode} ${city} ${province}</div>${country}</div>
        <div class="right_top_detail"><div><span class="right_top_detail_important">t</span> +${areaCode} ${telephone}</div><span class="right_top_detail_important">f</span> +${faxAreaCode} ${faxNumber}</div>
        <div class="right_top_detail">info@lotuscars.nl <div class="right_top_detail_important">lotuscars.com</div></div>
    </div>
    <div id="customerInfo">
        <div style="margin-left: 10px;height: 106.5px">
            <div class="right_top_detail_important">${company}</div>
            <div class="right_top_detail"><div>${street}</div><div>${postalCode} ${city} ${province}</div>${country}</div>
            <div class="right_top_detail"><div><span class="right_top_detail_important">t</span> +${areaCode} ${telephone}</div><span class="right_top_detail_important">f</span> +${faxAreaCode} ${faxNumber}</div>
            <div class="right_top_detail">info@lotuscars.nl <div class="right_top_detail_important">lotuscars.com</div></div>
        </div>
        <div id="tableTitleRight">
            <div>${quantityLang?html}</div>
            <div>${subtotalLang?html}</div>
        </div>
    </div>
    <!--         </div>-->
    <div class="invoice_title">${titleLang}</div>
    <div>
        <div class="invoice_list" style='margin-top: 10px;'>
            <div class="invoice_list_col">
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${customerNameLang?html}</div>
                    <div class="invoice_list_item_value">${customerName?html}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${customerAddressLang?html}</div>
                    <div class="invoice_list_item_value">${customerAddress}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${customerNoLang?html}</div>
                    <div class="invoice_list_item_value">${customerNo}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${customerVatLang?html}</div>
                    <div class="invoice_list_item_value">${customerVat}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${licensePlateLang?html}</div>
                    <div class="invoice_list_item_value">${licensePlate}</div>
                </div>
            </div>
            <div class="invoice_list_col">
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${invoiceNoLang?html}</div>
                    <div class="invoice_list_item_value">${invoiceNo}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${invoiceDateLang?html}</div>
                    <div class="invoice_list_item_value">${invoiceDate}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${paymentDateLang?html}</div>
                    <div class="invoice_list_item_value">${paymentDate}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${paymentTypeLang?html}</div>
                    <div class="invoice_list_item_value">${paymentType}</div>
                </div>
                <div class="invoice_list_col_item">
                    <div class="invoice_list_item_lable">${yourReferenceLang?html}</div>
                    <div class="invoice_list_item_value">${yourReference}</div>
                </div>
            </div>
        </div>
        <div id="tableTitleLeft">
            <span class="invoice_title" style="padding-bottom: 20px">${titleLang}</span>
            <div class="tableTitleLeft_div">
                <div>${serviceTypeLang?html}</div>
                <div>${vinLang?html}</div>
                <div><div>${perPiecePrefixLang?html}<div>${perPieceSuffixLang?html}</div></div></div>
                <div>${vatRateLang?html}</div>
                <div>${vatAmountLang?html}</div>
            </div>
        </div>
        <div style="margin-top: 60px;padding-right: 28px;">
            <table class="table">
                <tr class="table_title" >
                    <th>${serviceTypeLang?html}</th>
                    <th>${vinLang?html}</th>
                    <th>${perPiecePrefixLang?html}<div>${perPieceSuffixLang?html}</div></th>
                    <th>${vatRateLang?html}</th>
                    <th>${vatAmountLang?html}</th>
                    <th>${quantityLang?html}</th>
                    <th>${subtotalLang?html}</th>
                </tr>
                <tr class="table_value" style="height: 40px;">
                    <td class="table-tr-frist" style="padding-left: 7px;">${type?html}</td>
                    <td>${vin}</td>
                    <td>${priceExVat}</td>
                    <td>${vatRate}%</td>
                    <td>${vatAmount}</td>
                    <td>1</td>
                    <td>${totalInclVat}</td>
                </tr>
            </table>
        </div>
        <div style="border-right: 33px solid transparent; box-sizing: border-box;width: 100%;height: 200px;">
            <div class="table_footer">
                <div style="height:30px;margin-bottom: 10px;margin-top: 10px;vertical-align: text-top;">
                    <div class="table_sub_title"><div>${prePriceSumPrefixLang?html}</div>${prePriceSumSuffixLang?html}</div>
                    <div class="table_sub_value">${priceExVat}</div>
                </div>
                <div style="height:30px">
                    <div class="table_sub_title"><div>${vatAmountSumPrefixLang?html}</div>${vatAmountSumSuffixLang?html}</div>
                    <div class="table_sub_value">${totalVat}</div>
                </div>
                <div style="height:0.5px;background:#FFF101;margin: 5px 0;"></div>
                <div style="height:30px; margin-top: 6px;">
                    <div class="table_sub_title"><div>${subtotalSumPrefixLang?html}</div>${subtotalSumSuffixLang?html}</div>
                    <div class="table_sub_value">${totalInclVat}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom_text">
        <div>${tipsLang?html}</div>customerservice@lotus-hub.com
    </div>
</div>
</body>

</html>
